<template>
  <div class="box">
    <van-nav-bar title="首页" />
    <van-tabs v-model:active="active">
      <van-tab title="标签 1"
        ><div class="searchs">
          <van-search
            v-model="value"
            shape="round"
            background="#4fc08d"
            placeholder="请输入搜索关键词"
            @search="onSearch"
          />
        </div>
        <swiper :images="images"></swiper>

        <van-grid >
          <van-grid-item  v-for="(v,i) in list" :key="i"  icon-size="40"    :icon="v.image_src"  />
        </van-grid>
      </van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { swiperdataApi } from "@/api/api";
import { useRoute, useRouter } from "vue-router";
import { catitemsApi } from "@/api/api";

import swiper from "@/components/swiper.vue";
const router = useRouter();
const route = useRoute();

const images = ref([]);
const active = ref("");
const list=ref([]);

const swipeFun = () => {
  swiperdataApi().then((res) => {
    images.value = res.data.message;
  });
};
swipeFun();

const onSearch = (e) => {
  router.push({ name: "search", params: { key: e } });
};

const catFun=()=>{
    catitemsApi().then((res)=>{
        list.value=res.data.message;
    })
}
catFun();


</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
}
</style>
